<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" href="./css/chart.css">
		<link rel="stylesheet" href="./css/visit.css" />
		<script src="./js/vue.js"></script>
		<script src="js/jquery-3.5.1.js"></script>
		<script src="./js/echarts.js"></script>
	</head>
	<body>
		<div id="header">
			<div class="cont">
				<div class="topbar-nav">
					<a href="./index.html" style="float: left;">首页</a>
					<!-- <div v-for="type in types" style="float: left;">
						<span class="sep">|</span>
						<a href="#" v-bind:id-name="type.type" onclick="onClick(this)">{{ type.type }}</a>
					</div> -->
				</div>
				<div class="topbar-cart" id="J_miniCartTrigger">
					<a href="#" id="J_miniCartBtn" class="iconfont">购物车<span class="iconfont">（0）</span></a>
					<div class="cart-menu" id="J_miniCartMenu">
						<div class="loading">购物车中还没有商品，赶紧选购吧！</div>

					</div>

				</div>
				<div class="topbar-info" id="J_userInfo">
					<a class="link" href="">登录</a>
					<span class="sep">|</span>
					<a href="">问答</a>
					<span class="sep">|</span>
					<a href="">联系我们 </a>
				</div>

			</div>
		</div>

		<div>
			<!-- 左侧菜单 -->
			<div id="left">
				<div><a href="./type.html">Type</a></div>
				<div><a href="./movie.html">Movie</a></div>
				<div  style="background-color: #B0B0B0;"><a href="./visit.html">Visit</a></div>
				<div><a href="./ip.html">IP</a></div>
			</div>

			<div id='main'>
				<div id='visit_content'>
					<div id="total_visit">
						<p>总访问量<br>2000</p>
					</div>
					<div id="current_visit">
						<p>最近一小时访问量<br>20</p>
					</div>
				</div>
				
				
				<div id="chart">	
				</div>
			</div>
		</div>

		<script type="text/javascript">

			// pie 图形
			var pie = echarts.init(document.getElementById("chart"))

			let base = +new Date(2022, 06, 1);
			let oneMinute = 60 * 1000;
			let date = [];
			let data = [0];
			for (let i = 1; i < 8000; i++) {
			  var now = new Date((base += oneMinute));
			  date.push([now.getFullYear(), now.getMonth(), now.getDate()].join('/'));
			  data.push(Math.floor(Math.random() * (200 - 0)));
			  // Math.floor(Math.random() * (100 - 0)) 
			}
			option = {
			  tooltip: {
			    trigger: 'axis',
			    position: function (pt) {
			      return [pt[0], '10%'];
			    }
			  },
			  title: {
			    left: 'center',
			    text: 'Visit'
			  },
			  toolbox: {
			    feature: {
			      dataZoom: {
			        yAxisIndex: 'none'
			      },
			      restore: {},
			      saveAsImage: {}
			    }
			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    data: date
			  },
			  yAxis: {
			    type: 'value',
			    boundaryGap: [0, '100%']
			  },
			  dataZoom: [
			    {
			      type: 'inside',
			      start: 0,
			      end: 10
			    },
			    {
			      start: 0,
			      end: 10
			    }
			  ],
			  series: [
			    {
			      name: 'visitor',
			      type: 'line',
			      symbol: 'none',
			      sampling: 'lttb',
			      itemStyle: {
			        color: 'rgb(255, 70, 131)'
			      },
			      areaStyle: {
			        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			          {
			            offset: 0,
			            color: 'rgb(255, 158, 68)'
			          },
			          {
			            offset: 1,
			            color: 'rgb(255, 70, 131)'
			          }
			        ])
			      },
			      data: data
			    }
			  ]
			};

			pie.setOption(option)

		</script>

	</body>
</html>
